.controlList {
  display: flex;
  align-items: center;
  height: 100%;
  margin-bottom: 0;
  margin-left: -50px;
}

.control {
  display: flex;
  align-items: center;
  min-width: 60px;
  height: 100%;
  padding: 0 10px;
  color: #000;
  font-size: 14px;
  cursor: pointer;
  &:hover {
    color: #1890ff;
  }
}

.control .openFile {
  display: none;
}

.control.line::after {
  position: absolute;
  top: 50%;
  right: 0;
  height: 16px;
  border-right: 1px solid #ddd;
  transform: translateY(-50%);
  content: '';
}

.control button i {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.zoom {
  background: url('./icons/zoom.svg') 0 0 no-repeat;
}

.zoomIn {
  background: url('./icons/zoomIn.svg') 0 0 no-repeat;
}

.zoomOut {
  background: url('./icons/zoomOut.svg') 0 0 no-repeat;
}

.undo {
  background: url('./icons/undo.svg') 0 0 no-repeat;
}

.redo {
  background: url('./icons/redo.svg') 0 0 no-repeat;
}

.save {
  background: url('./icons/save.svg') 0 0 no-repeat;
}

.download {
  background: url('./icons/download.svg') 0 0 no-repeat;
}

.image {
  background: url('./icons/image.svg') 0 0 no-repeat;
}

.open {
  background: url('./icons/open.svg') 0 0 no-repeat;
}

.preview {
  background: url('./icons/preview.svg') 0 0 no-repeat;
}
